<template>
  <div class="container">

    <!-- 面包屑导航 -->
    <navbar></navbar>
    <!--
    <div class="content page-title">
      <h2>标签管理</h2>
    </div>
    -->
    <div class="content">
      <h2 class="padding">标签管理</h2>
<!--      <h2 class="padding">标签管理</h2>-->
      <!--      <h3>数据筛选</h3>-->
        <el-form :inline="true" id="searchForm" :model="searchForm" ref="searchForm" class="search-form" size="small">
          <el-form-item label="标签" prop="name">
            <el-input
                v-model="searchForm.name"
                placeholder="请输入标签"
                maxlength="20"
                show-word-limit
                clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="标签状态" prop="status">
            <el-select
                v-model="searchForm.status"
                placeholder="请选择标签状态"
                filterable
                clearable
            >
              <el-option
                  v-for="item in tagStatusArr"
                  :key="item.dictId"
                  :label="item.dictName"
                  :value="item.dictId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="更新方式" prop="updateWay">
            <el-select
                v-model="searchForm.updateWay"
                placeholder="请选择更新方式"
                filterable
                clearable
            >
              <el-option
                  v-for="item in dictionaries.customer_tag_refresh_type"
                  :key="item.dictId"
                  :label="item.dictName"
                  :value="item.dictId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain  @click="fetchData('search')">查询</el-button>
            <el-button
                type="primary"
                plain
                @click="fetchData('reset')"
            >重置
            </el-button>
          </el-form-item>
        </el-form>
    </div>
    <div class="content label-button">
      <div class="label"><label>客户标签</label></div>
      <div class="button-list">
        <router-link :to="{path:'/LabelGroup/labelAdd',query: {type: 'program', createWay:1, state: 'add'}}"><el-button type="primary" plain  @click="fetchData('search')" class="program-but">新增程序化标签</el-button></router-link>
        <router-link :to="{path:'/LabelGroup/labelAdd',query: {type: 'diy', createWay:2, state: 'add'}}"><el-button type="primary" plain  @click="fetchData('search')" class="custom-but">新增自定义标签</el-button></router-link>
      </div>
    </div>
    <div class="content customer-label">
      <div class="content-box">
        <div class="content-box-left">
          <label-tree ref="labelTree" :isShowCheckbox="false" typeStr="labelManage" :searchFormObj="searchForm"></label-tree>
        </div>
        <div class="content-box-right">
          <graphic-content></graphic-content>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import navbar from '@/components/navbar.vue'
import LabelTree from './components/LabelTree.vue'
import GraphicContent from './components/GraphicContent.vue'
import common from './mixins/common'

export default {
  mixins: [common],
  components: {
    navbar,
    LabelTree,
    GraphicContent
  },
  data () {
    return {
      loading: false,
      defaultProps: '',
      page: { list: [], pageNo: 1, pageSize: 8, totalNum: 0, currentPage: 1 },
      searchForm: { name: '', status: '', updateWay: '' },
      salesAuthority: [{ reallyName: 'reallyName', id: 123 }],
      tagStatusArr: [{ dictId: '1', dictName: '正常运行' }, { dictId: '2', dictName: '已暂停' }]
    }
  },
  mounted () {
    this.$nextTick(_ => {
      // this.tagStatusArr = [].concat(this.dictionaries.customer_tag_status)
      // this.tagStatusArr.splice(2, 1)
      // console.log(this.tagStatusArr)
    })
  },
  created () {
    // 获取默认数据
    // this.fetchDefaultData()
    // console.log(process.env)
    this.dictionariesFilters()
  },
  watch: {
    /* 监听*/
    $route () {
      // this.testFun();
    }
  },
  methods: {
    // 获取默认数据
    fetchData (model) {
      if (model === 'reset') {
        this.$refs['searchForm'].resetFields()
        this.$refs.labelTree.fetchData()
      } else {
        this.$refs.labelTree.fetchData()
      }
    },
    // 员工排行榜
    getEmployeeRanking () {
      const params = {}
      this.$api.employeeRanking(params).then((res) => {
        console.log(res)
      }).catch((err) => {
        console.log(err)
      })
    },
    // ****************** 翻页 ******************
    currentChange (currentChange) {
      this.page.pageNo = currentChange
      this.getEmployeeRanking(false, this.dateArr, this.orgCode)
    },
    sizeChange (sizeChange) {
      this.page.pageNo = 1
      this.page.currentPage = 1
      this.page.pageSize = sizeChange
      this.getEmployeeRanking(false, this.dateArr, this.orgCode)
    },
    // ****************** 翻页 end ******************
    append (data) {
      console.log(data)
    }
  }
}
</script>

<style scoped lang="scss">
@import './assets/common';
///deep/ .el-table th > .cell { text-align: unset; }
.content{
  padding-bottom: 10px!important;
}
h2 {
  position: relative;
  margin-bottom: 21px;
  padding-left: 11px;

  &:before {
    position: absolute;
    top: 4px;
    left: 0;
    display: inline-block;
    content: '';
    width: 4px;
    height: 17px;
    background-color: #2d7edf;
  }
}
#searchForm{
  .el-form-item{
    &:last-child{
      //background-color: #FFBA00;
      margin-right:0;
      max-width: 120px;
      min-width: 120px;
      :deep(.el-form-item__content){
        width: 100%;
      }
    }
  }
}
.program-but, .custom-but{
  //width: 128px;
  //height: 36px;
  //border-radius: 5px;
  color: #ffffff;
}
.program-but{
  background-color: #12AB62;
}
.custom-but{
  background-color: #4168E7;
}
.customer-label{
  padding: 0!important;
  .content-box {
    display: flex;
    background-color: #f5f5f5;
    .content-box-left, .content-box-right {
      //background-color: #ffffff;
      float: left;
    }

    .content-box-left {
      border: 15px solid #ffffff;
      width: 350px;
      background-color: #f4f7fc;
      .title-operation {
        float: right;
        margin-right: 15px;
        .el-button {
          min-width: unset;
        }
      }
    }
    .content-box-right {
      width: calc(100% - 395px);
      margin-left: 15px;

    }
  }
}

.label-button{
  display: flex;
  .label, .button-list{
    flex: 1;
  }
.label{text-align: left;line-height: 40px;font-size: 18px;}
.button-list{
text-align: right;
  a + a{
    margin-left: 10px;
  }
}
}
</style>
